<template>
	<view class="min-vh-70">
		<view class="x-navbar x-navbar-sticky x-navbar-body"
			:style="[`--bg-opacity:${opacity.navbar}`, '--padding:0px', `padding-top:${PLATFORM.statusBarHeight}px`]">
			<view class="x-navbar-icons" @tap="$page.back()">
				<uni-icons type="left" size="24" color="var(--xl-primary-dark-3)"></uni-icons>
			</view>
			<view class="x-navbar-icons"></view>
			<view class="x-navbar-content">
				<text class="text-primary h6 font-weight-700 text-ellipsis-1 x-navbar-title">订单</text>
			</view>
			<view class="x-navbar-icons"></view>
			<view class="x-navbar-icons"></view>
		</view>
		<view class="tab"
			:style="[`--bg-opacity:${opacity.navbar}`, `--xl-status-bar-height:${PLATFORM.statusBarHeight}px`]">
			<view class="flex-1">
				<scroll-view scroll-x :scroll-into-view="search.state" scroll-with-animation>
					<view class="tab-body">
						<view class="tab-body-item" @tap="toChangeTab(item)"
							:class="item.id == search.state ? 'text-primary font-weight-600' : ''"
							v-for="(item, index) in tabList" :key="index" :id="item.id">{{ item.name }}</view>
					</view>
				</scroll-view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="x-mp-weixin-capsule"></view>
			<!-- #endif -->
		</view>
		<view class="p-4 flex flex-column grid-gap-4" v-if="list.length > 0">
			<view class="bg-white rounded-4 p-4 flex flex-column grid-gap-4" v-for="(item, index) in list"
				:key="item.trade">
				<view class="flex text-grey">
					<text class="h9 text-placeholder">订单编号：{{ item.trade }}</text>
					<view class="flex-1"></view>
					<text class="h9" :class="'text-' + item.state_text.style.type + '-light-3'">{{ item.state_text.text
						}}</text>
				</view>
				<view class="flex flex-column grid-gap-1 bg">
					<view class="bg-white py-2" v-for="project in item.projects" :key="project.id"
						@tap="$page.open('/channels/pages/order/detail?trade=' + item.trade)">
						<x-project-item :project="project">
							<template #action>
								<view @tap.stop class="flex flex-center grid-gap-1">
									<text class="text-placeholder">x</text>
									<text class="font-weight-600 text-grey" v-if="project.num > 0">{{ project.num
										}}</text>
								</view>
							</template>
						</x-project-item>
					</view>
				</view>
			</view>
			<x-more :status="loading" @load="toChangeTab()"></x-more>
		</view>
		<view class="vh-50 flex flex-center" v-else>
			<x-empty type="order" text="暂无订单"></x-empty>
		</view>
		<x-loading v-if="loading === 'loading'" />
	</view>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from "vue";
import { $api, $page } from "@/utils";
import { onLoad,onShow, onUnload, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import { useUserStore, usePlatformStore, useRefs } from "@/stores";
import { $OrdersState, $EventName } from "@/utils/const/env";
const UserStore = useUserStore();
const PlatformStore = usePlatformStore();
const { PLATFORM } = useRefs(PlatformStore);
const opacity = ref<{
	navbar: number | string
	search: number | string
}>({
	navbar: 0,
	search: 0,
});
const top = ref(0);
const tabTop = ref<number | undefined>();
watch(() => top.value, (val: number) => {
	if (val < -10) {
		return;
	}
	opacity.value.navbar = val > 50 ? 1 : (val / 50).toFixed(1);
	opacity.value.search = val > (50 + PLATFORM.value.statusBarHeight) ? 1 : (val / (50 + PLATFORM.value.statusBarHeight)).toFixed(1);
	if (tabTop.value) {
		const start = tabTop.value - (50 + PLATFORM.value.statusBarHeight);
		const end = tabTop.value - PLATFORM.value.statusBarHeight;
		if (val < start) {
			opacity.value.tab = 0;
		} else {
			opacity.value.tab = val > end ? 1 : (((val - start) / (end - start))).toFixed(1);
		}
	}
	if (val < 10) {
		list.value = list.value.sort((a: any, b: any) => a.sort - b.sort);
	}
})
onPageScroll(({ scrollTop }: { scrollTop: number }) => {
	top.value = scrollTop;
})
const search = ref({
	page: 1,
	limit: 10,
	action: 'channels',
	state: 'all',
});
const loading = ref<LoadingType>('loadmore');
const list = ref([]);
const tabList = ref([
	{ name: '全部', id: 'all' },
	{ name: '待支付', id: $OrdersState.NOT_PAY },
	{ name: '已支付', id: $OrdersState.PAY },
	{ name: '待服务', id: $OrdersState.WAIT_START },
	{ name: '服务中', id: $OrdersState.SERVICE_ING },
	{ name: '待评价', id: $OrdersState.WAIT_COMMENT },
	{ name: '已完成', id: $OrdersState.FINISH },
	{ name: '转单中', id: $OrdersState.TRANSFERRING_ORDERS },
	{ name: '退款中', id: $OrdersState.REFUNDING },
	{ name: '已退款', id: $OrdersState.REFUND },
	{ name: '已取消', id: $OrdersState.CANCEL },
]);
const getList = () => {
	if (!UserStore.hasLogin() || loading.value !== 'loadmore') { return; }
	loading.value = 'loading';
	$api.Orders.list(search.value).then((data: any) => {
		loading.value = 'loadmore';
		list.value = [...list.value, ...data.data];
		if (data.current_page >= data.last_page) {
			nextTick(() => {
				loading.value = 'nomore';
			})
		}
	}).catch(() => {
		loading.value = 'nomore';
	})
}
const toChangeTab = (item?: any) => {
	loading.value = 'loadmore';
	if (item && item.id) {
		search.value.state = item.id;
	}
	search.value.page = 1;
	list.value = [];
	getList();
}
onLoad(() => {
	toChangeTab();
	uni.$on($EventName.UPDATE_ORDER, toChangeTab);
});
onUnload(() => {
	uni.$off($EventName.UPDATE_ORDER, toChangeTab);
});
onReachBottom(() => {
	getList();
});
</script>

<style lang="scss" scoped>
.tab {
	--bg-opacity: 0;
	height: 50px;
	position: sticky;
	top: max(constant(safe-area-inset-top), var(--xl-status-bar-height));
	top: max(env(safe-area-inset-top), var(--xl-status-bar-height));
	z-index: 999;
	background-color: rgba(255, 255, 255, var(--bg-opacity));

	&-body {
		height: 50px;
		line-height: 50px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		gap: 20px;

		&-item {
			padding: 0 10px;
			word-break: nowrap;
			white-space: nowrap;
		}
	}

	.x-mp-weixin-capsule {
		width: calc(104px * var(--bg-opacity));
		transition: width 0.3s;
	}
}
</style>
